<template>
	<view class="page">

		<custom-navigation title="营收报表">
		</custom-navigation>

		<view class="flex-row-center" @click="showPicker=true"
			style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-bottom: 22rpx;">
			<view class="search-box flex-row-center">
				<view class="input" v-model="searchStr">{{start_time.length==0?'请选择时间':start_time+'至' +end_time}}</view>
				<image src="/static/rili.png"></image>
			</view>
		</view>

		<scroll-view class="body-scroll" scroll-y="true" @scrolltolower="loadMoreData">
			<view class="stats-box">
				<view class="title-box flex-row-center">
					营收概况
					<image src="../../static/help.png" @click="showDialog(3)"> </image>
				</view>
				<view class=" ir-box">
					<view class="ir flex-column-center" v-for="(item,index) in stats_data"
						:style="{'marginLeft':index%2==1?'30rpx':'0'}">
						<view class="text1 flex-row-center">{{item.value||0}}
							<!-- <image src="/static/jifen.png"></image> -->
						</view>
						<view class="text2">{{item.label}}</view>
					</view>
				</view>
			</view>
			<view class="item-box" v-for="(item,index) in datas">

				<view class="title2">各模块实收统计</view>
				<view class="item-view flex-column">
					<view class="title-box flex-row-center">
						<view class="title">收银-销售</view>
						<view class="amount">￥{{item.terminal_total||0}}</view>
						<image :src="item.syExpand?'/static/arrow_up.png':'/static/arrow_down.png'"
							@click="item.syExpand=!item.syExpand"></image>
					</view>
					<view class="item-wrap-view" v-if="!item.syExpand">
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">现金支付</view>
								<view class="value">￥{{item.cash_terminal_total||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">会员钱包</view>
								<view class="value">￥{{item.member_terminal_total||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">微信支付</view>
								<view class="value">￥{{item.wechat_terminal_total||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">支付宝支付</view>
								<view class="value">￥{{item.alipay_terminal_total||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">和包支付</view>
								<view class="value">￥{{item.and_package_shopping||0}}</view>
							</view>
						</view>
					</view>

					<view class="title-box flex-row-center">
						<view class="title">商城-销售</view>
						<view class="amount">￥{{item.shopping_total||0}}</view>
						<image :src="item.scExpand?'/static/arrow_up.png':'/static/arrow_down.png'"
							@click="item.scExpand=!item.scExpand"></image>
					</view>
					<view class="item-wrap-view" v-if="!item.scExpand">
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">现金支付</view>
								<view class="value">￥{{item.cash_shopping||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">会员钱包</view>
								<view class="value">￥{{item.member_shopping||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">微信支付</view>
								<view class="value">￥{{item.wechat_shopping||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">支付宝支付</view>
								<view class="value">￥{{item.alipay_shopping||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">和包支付</view>
								<view class="value">￥{{item.and_package_shopping||0}}</view>
							</view>
						</view>
					</view>

					<view class="title-box flex-row-center">
						<view class="title">充值</view>
						<view class="amount">￥{{item.recharge_total||0}}</view>
						<image :src="item.czExpand?'/static/arrow_up.png':'/static/arrow_down.png'"
							@click="item.czExpand=!item.czExpand"></image>
					</view>
					<view class="item-wrap-view" v-if="!item.czExpand">
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">现金支付</view>
								<view class="value">￥{{item.cash_recharge_total||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">微信支付</view>
								<view class="value">￥{{item.wechat_recharge_total||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">支付宝支付</view>
								<view class="value">￥{{item.alipay_recharge_total||0}}</view>
							</view>
						</view>
						<view class="item-view flex-row">
							<image src="/static/report_revenue1.png"></image>
							<view class="flex-column">
								<view class="value">和包支付</view>
								<view class="value">￥{{item.and_package_recharge_total||0}}</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<report-alert v-show="!showPicker" :title="dialogTitle" :message="dialogMessage" :show="dialogShow" @leftAction="dialogShow=false"></report-alert>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				datas: [],
				page: 1,
				searchStr: '',
				stats_data: {}, 
				start_time: new Date().toISOString().slice(0, 10),
				end_time:new Date().toISOString().slice(0, 10),
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: '',
				dialogTitle: '',
				dialogMessage: '',
				dialogShow: false,
				relation_condition: {}
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			let relation_condition = uni.getStorageSync("relation_condition")
			if (relation_condition) {
				this.relation_condition = relation_condition
				uni.setStorageSync("relation_condition", null)
				this.page = 1
				this.getData()
			}
		},
		methods: {
			showDialog(type) {
				this.dialogShow = false
				this.dialogTitle = "营收概况"
				this.dialogMessage="【实收总额】：周期内，实收金额为实际收到的金额，不包括会员卡消费，实收金额 = 会员充值-会员调额+现金收入+支付宝账户+微信账户+其他收入。\n【销售总额】：周期内，销售总额为商品实际销售的金额，不包括会员卡的充值，当售后退款时，需减少退款的销售额；销售总额=会员消费+现金收入+支付宝账户+微信账户+其他收入。\n【充值总额】：周期内，会员充值和手动充值总额，不包括充值赠送的金额。\n【会员总调额】：周期内，手动扣减会员的本金金额之和，不包括扣减的赠送金额。\n【会员卡消费】：会员购买商品时使用会员卡储值支付的金额之和。"
				this.dialogShow = true
			},
			onSelected(e) { //选择
				this.showPicker = false;
				this.dialogShow = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
					this.start_time = e.value[0].replaceAll("/", "-")
					this.end_time = e.value[1].replaceAll("/", "-")
					this.page = 1;
					this.getData()
				}
			},
			itemOnClick(item) {
				let info = JSON.stringify(item)

				this.$navigateTo('/pages/report/member_points_detail?info=' + info)
			},
			doSearch() {
				this.page = 1;
				this.getData() 
			},
			loadMoreData() {
				this.page++;
				this.getData()
			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvretail_app_revenue_report_select", {
					"serviceName": "srvretail_app_revenue_report_select",
					"colNames": [
						"*"
					],
					relation_condition: this.relation_condition,
					// "condition": this.end_time.length == 0 ? [] : [{
					// 	"colName": "date",
					// 	"value": this.start_time,
					// 	"ruleType": "ge"
					// }, {
					// 	"colName": "date",
					// 	"value": this.end_time + " 23:59",
					// 	"ruleType": "le"
					// }],
					"relation_condition":this.end_time.length == 0 ?{}: {
					    "relation": "AND",
					    "data": [
					      {
					        "colName": "start_date",
					        "ruleType": "eq",
					        "value": this.start_time,
					      },
					      {
					        "colName": "end_date",
					        "ruleType": "le",
					        "value": this.end_time + " 23:59",
					      }
					    ]
					  },
					"page": {
						"pageNo": this.page,
						"rownumber": 10
					}
				}).then(res => {
					this.dialogShow = false;
					uni.hideLoading()
					if (res.state == "SUCCESS") {
						this.stats_data = res.stats_data
						for (let i in res.data) {
							res.data[i].syExpand = false
							res.data[i].scExpand = false
							res.data[i].czExpand = false
						}
						if (this.page == 1)
							this.datas = res.data;
						else {
							if (res.data.length == 0) {
								this.$showToast("没有更多数据了！")
							}
							this.datas.push(...res.data)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;
		margin-right: 24rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 39rpx;

		}

		.input {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 28rpx;
			color: #999999
		}
	}

	.tab-box {
		height: 100rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		justify-content: center;
		padding-left: 72rpx;
		padding-right: 72rpx;

		.item {
			padding-top: 32rpx;
			flex: 1;

			.bubble {

				min-width: 24rpx;
				height: 24rpx;
				background: rgba(212, 48, 48, 1);
				color: white;
				font-size: 20rpx;
				line-height: 24rpx;
				border-radius: 12rpx;
				font-weight: 500;
				text-align: center;
				top: -13rpx;
				right: -20rpx;
				position: absolute;

			}

			.unchecktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.checktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.in {
				margin-top: 4rpx;
				width: 48rpx;
				height: 6rpx;
				background-color: rgba(56, 192, 158, 1);
				;
				border-radius: 3rpx;
			}
		}
	}

	.stats-box {
		width: 702rpx;
		opacity: 1;
		margin-left: 24rpx;
		border-radius: 12rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);

		.title-box {
			color: rgba(47, 47, 47, 1);
			font-size: 36rpx;
			font-weight: 700;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}


		.ir-box {
			flex-wrap: wrap;
			display: flex;

			.ir {
				margin-top: 20rpx;
				width: 308rpx;
				height: 78px;
				border-radius: 12rpx;
				border: 2rpx solid rgba(227, 227, 227, 1);
				justify-content: center;

				.text1 {
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(212, 48, 48, 1);

					image {
						margin-left: 8rpx;
						height: 32rpx;
						width: 32rpx;
					}
				}

				.text2 {
					margin-top: 8rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(47, 47, 47, 1);
				}
			}
		}
	}



	.item-box {
		padding: 24rpx 24rpx 0 24rpx;
		width: 702rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);

		.title2 {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(47, 47, 47, 1);
		}

		.item-view {
			margin-bottom: 24rpx;

			.title-box {
				width: 100%;
				margin: 20rpx 0;
				height: 70rpx;
				border-radius: 12rpx;
				padding: 0 24rpx;
				box-sizing: border-box;
				background: rgba(211, 242, 234, 1);

				.title {
					flex: 1;
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(56, 192, 158, 1);
				}

				.amount {
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(212, 48, 48, 1);
				}
			}

			.item-wrap-view {
				display: flex;
				flex-wrap: wrap;

				.item-view {
					width: 320rpx;
					box-sizing: border-box;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 12rpx;
						margin-left: 24rpx;
					}

					.value {
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(0, 0, 0, 1);
					}
				}
			}


			.lable {
				font-size: 36rpx;
				color: rgba(0, 0, 0, 1);
			}

			.value {
				margin-left: 8rpx;
				font-size: 36rpx;
				color: rgba(153, 153, 153, 1);
			}



			image {
				margin-left: 50rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

	}
</style>
